<!--
 * @Author: 孙文豪
 * @Description:
 * @Date: 2022-08-01 14:33:18
 * @LastEditTime: 2023-01-13 17:29:12
 * @LastEditors: 孙文豪
-->
<template>
  <div class="switchbox" :class="{ switchR: isswitch }">
    <p class="switchtext switchtext_a" v-if="optionText[0] && !textPosition">
      {{ optionText[0] }}
    </p>
    <div class="switchbtn" @click="isswitchFn">
      <p class="switchbtn_info"></p>
    </div>
    <p class="switchtext switchtext_b" v-if="optionText[1] && !textPosition">
      {{ optionText[1] }}
    </p>
    <p class="switchtext switchtext_b" v-else>
      {{ isswitch ? optionText[1] : optionText[0] }}
    </p>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "SwhSwitchButton",
  props: {
    disable: {
      //是否禁用
      type: Boolean,
      default: false,
      explain: "是否禁用",
      otherVal: true,
    },
    switchValue: {
      //初始值
      type: Boolean,
      default: false,
      explain: "初始值",
      otherVal: true,
    },
    optionText: {
      //选项文字
      type: Array,
      default: () => {
        return [];
      },
      explain: "选项文字",
      otherVal: "['关','开']",
    },
    textPosition: {
      type: Boolean,
      default: false,
      explain: "文字位置：false左右两侧，true右侧",
      otherVal: true,
    },
    getSwitchVal: {
      type: Function,
      explain: "监听切换结果事件",
    },
  },
  setup(props, ctx) {
    const data = reactive({
      isswitch: props.switchValue,
    });
    const isswitchFn = () => {
      if (!props.disable) {
        data.isswitch = !data.isswitch;
        ctx.emit("getSwitchVal", data.isswitch);
      }
    };
    return {
      isswitchFn,
      ...toRefs(data),
    };
  },
};
</script>
<style scoped lang="less">
.switchbtn_info {
  width: 18px;
  height: 100%;
  background: @HSC;
  border-radius: 10px;
  transition: 0.3s;
}
.switchR .switchbtn_info {
  margin-left: 20px;
  background: @TSB;
}
.switchbtn {
  margin: 0 10px;
  width: 40px;
  height: 18px;
  padding: 2px;
  background: @HSE;
  border-radius: 20px;
  float: left;
  cursor: pointer;
}
.switchtext_a {
  color: @TSA;
}
.switchtext_b {
  color: @TSC;
}
.switchtext {
  float: left;
  line-height: 22px;
}
.switchR .switchbtn {
  background: @TSD;
}
.switchR .switchtext_a {
  color: @TSC;
}
.switchR .switchtext_b {
  color: @TSA;
}
.switchbox {
  position: relative;
  width: 100%;
  height: 100%;
  caret-color: transparent;
}
</style>
